<template>
    <div class="app-container">
        <table-toolbar :tools="tools" :showSearch="true" :searchPlaceholder="'文章标题'" @tool-click="toolbarClick" @on-search="onSearchClick"></table-toolbar>
        <el-table
                ref="newsListTable"
                v-loading.body="loading"
                element-loading-text="拼命加载中"
                :data="newsList"
                @sort-change="sortChangeHandle"
                @selection-change="handleSelectionChange"
                border
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="新闻标题">
            </el-table-column>
            <el-table-column
                    prop="intro"
                    label="新闻简介">
            </el-table-column>
            <el-table-column
                    sortable="custom"
                    prop="created_at"
                    label="创建时间"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    sortable="custom"
                    prop="status"
                    label="状态"
                    show-overflow-tooltip>
                <template scope="scope">
                    <el-tag v-if="scope.row.status === 1" type="success">已发布</el-tag>
                    <el-tag v-if="scope.row.status === 0" type="gray">未发布</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button type="primary" icon="edit" size="small" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button type="warning" icon="delete" size="small" @click="deleteNews(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <table-pagination :dataTotal="dataTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange"></table-pagination>
    </div>
</template>
<script>
    import newsApi from '../../../api/news'
    import { Message } from 'element-ui'
    import TableToolbar from '@/components/TableToolbar'
    import TablePagination from '@/components/TablePagination'
    import { getSortAndOrder } from '../../../utils/common'
    import _ from 'lodash'
    export default {
      components: {
        TableToolbar,
        TablePagination
      },
      data () {
        return {
          newsList: [],
          multipleSelection: [],
          tools: [
            {
              'btn-type': 'info',
              'btn-name': '添加',
              key: 'add',
              icon: 'plus'
            },
            {
              'btn-type': 'info',
              'btn-name': '删除',
              key: 'delete',
              icon: 'delete'
            }
          ],
          dataTotal: 0,
          loading: true,
          searchParams: {
            limit: 10,
            page: 1,
            search: false,
            order: false,
            sort: false
          }
        }
      },
      created () {
        this.getNewsList(this)
      },
      methods: {
        getNewsList: _.debounce((self) => {
          self.loading = true
          newsApi.getNewsList(self.searchParams).then(response => {
            self.newsList = response.data.data
            self.dataTotal = response.data.meta.pagination.total
            self.loading = false
          }, response => {
            Message.error(response.data.message)
          })
        }, 500),
        toolbarClick (tool) {
          switch (tool.key) {
            case 'add':
              this.$router.push({name: 'NewsManagerAdd'})
              break
            case 'delete':
              this.deleteMultipleSelection()
              break
          }
        },
        onSearchClick (keyword) {
          if (this.searchParams.search === keyword) {
            return false
          }
          this.searchParams.search = keyword
          this.getNewsList(this)
        },
        handleSizeChange (size) {
          this.searchParams.limit = size
        },
        handleCurrentChange (page) {
          this.searchParams.page = page
        },
        sortChangeHandle (column) {
          const data = getSortAndOrder(column)
          if (data) {
            this.searchParams.order = data.order
            this.searchParams.sort = data.sort
            this.getNewsList(this)
          }
        },
        handleSelectionChange (val) {
          this.multipleSelection = val
        },
        edit (id) {
          this.$router.push({name: 'NewsManagerEdit', params: {id: id}})
        },
        deleteMultipleSelection () {
          const ids = _.map(this.multipleSelection, 'id').join(',')
          this.deleteNews(ids)
        },
        deleteNews (ids) {
          const self = this
          if (!ids) {
            self.$message.warning('请选择需要删除的数据')
            return false
          }
          self.$confirm('此操作将要删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            newsApi.deleteNews(ids).then(() => {
              self.$message.success('删除成功')
              self.getNewsList(self)
            }, response => {
              self.$message.error(response.data.error)
            })
          })
        }
      },
      watch: {
        'searchParams.page' () {
          this.getNewsList(this)
        },
        'searchParams.limit' () {
          this.getNewsList(this)
        }
      }
    }
</script>
<style>

</style>
